<template>
    <view class="easy-cell-item">
        <view class="flex-v-c">
            <uni-icons v-if="showIcon" class="icon" :size="40" :type="icon"></uni-icons>
            <text class="label">{{ label }}</text>
            <text class="value">{{ value }}</text>
        </view>

        <uni-icons v-if="showArrowRight" class="icon-arrow-right" type="arrowright"></uni-icons>
    </view>
</template>

<script>
export default {
    props: {
        icon: {
            type: String,
            default: "",
        },
        label: {
            type: String,
            default: "",
        },
        value: {
            type: String,
            default: "",
        },
        showArrowRight: {
            type: Boolean,
            default: true,
        },
        showIcon: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {}
    },
    methods: {},
}
</script>

<style lang="scss">
.easy-cell-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 64rpx;
    padding: $app-page-padding 0;
    margin: 0 $app-page-padding;
    background: $color-white;
    border-bottom: solid 1rpx #f0f0f0;
    .icon {
        margin-right: 20rpx;
        color: $color-gray-1;
    }
    .label {
        font-size: $font-size-30;
        color: $color-gray-1;
        // width: 175rpx;
    }
    .value {
        display: flex;
        justify-content: flex-end;
        color: $app-color-text-tip;
        font-size: $font-size-30;
    }
    .icon-arrow-right {
        margin-left: 20rpx;
        color: $color-gray-1;
    }
}
.easy-cell-item:last-child {
    border-bottom: none;
}
</style>
